<template>
  <div>
    <!-- van-tabbar
    v-model="索引/name值"
    route:路由模式
    active-color:选中后 的颜色
    inactive-color:没选中时颜色
    van-tabbar-item
    name:对应v-model的值
    to:跳转地址
    icon:图标
    slot="默认插槽文本内容/作用域下的具名插槽：图标"
    template  #icon="{active}"
    active:是否选中 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/"
        ><span>首页</span>
        <template #icon="{ active }">
          <GeekIcon v-if="active" name="icon-home-sel"></GeekIcon>
          <GeekIcon v-else name="icon-home"></GeekIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/question"
        ><span>问答</span>
        <template #icon="{ active }">
          <!-- 选中
          <van-icon v-if="active" name="search" />
          <van-icon v-else name="home-o" />
          没选中 -->
          <GeekIcon v-if="active" name="icon-qa-sel"></GeekIcon>
          <GeekIcon v-else name="icon-qa"></GeekIcon> </template
      ></van-tabbar-item>
      <van-tabbar-item to="/video"
        ><span>视频</span>
        <template #icon="{ active }">
          <GeekIcon v-if="active" name="icon-video-sel"></GeekIcon>
          <GeekIcon v-else name="icon-video"></GeekIcon> </template
      ></van-tabbar-item>
      <van-tabbar-item to="/user"
        ><span>我的</span>
        <template #icon="{ active }">
          <GeekIcon v-if="active" name="icon-mine-sel"></GeekIcon>
          <GeekIcon v-else name="icon-mine"></GeekIcon> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import GeekIcon from '@/components/geek-icon.vue'
export default {
  name: 'AppTabbar',
  components: {
    GeekIcon
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.van-tabbar {
  background: #f7f8fa;
  position: static;
}
::v-deep .van-tabbar-item--active {
  color: #fc6627;
  background-color: #f7f8fa;
}
::v-deep .van-tabbar-item__icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
}
</style>
